
<template>
  <div class="Index">
    <div class="contain">
      <el-calendar v-model="value"> </el-calendar>
    </div>
    <div class="notify" style="border-left:1px solid gray;padding-left:20px">
      <b>通知:</b>以下订单将在7天内到期
      
      <el-table :data="dateLineOrder" style="width: 100%;" stripe height="400">
        <el-table-column label="订单ID" width="150">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单拥有者ID" width="150">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.userId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单到期时间" width="150">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
          </template>
        </el-table-column>
       
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: new Date(),
      dateLineOrder:"",//即将过期的订单
    };
  },
  methods:{
     getEndTimeOrder() {
      let now = new Date();
      let time = new Date(now.getTime() + 604800000);
      let _this = this;
      this.$axios({
        url: "/order/getEndTimeOrder",
        method: "get",
        params: { start: now, end: time  },
      }).then(function (resp) {
        _this.dateLineOrder = resp.data;
      });
    },
  },
  created() {
    this.getEndTimeOrder();
  },
};
</script>


<style >

.Index{
  display: flex;
}
.contain {
  margin: 0 auto;
}
.el-calendar-table .el-calendar-day {
  height: 10vh !important;
}
</style>